<template>
  <div class="content">
    <el-card>
      <div slot="header" class="header">
        <span>{{ formName }}</span>
        <el-button type="success" size="mini" @click="setLoayout">设置布局</el-button>
      </div>
      <queryLayout :body="search" :app-name="formName">
        <el-button slot="btn" type="primary" size="mini" circle icon="el-icon-edit" @click="setSearch" />
        <template slot="leftBtn">
          <el-button v-if="left != null" type="danger" size="mini" circle icon="el-icon-delete" @click="drop" />
          <el-button type="primary" size="mini" circle icon="el-icon-edit" @click="setLeft" />
        </template>
        <w-table
          :data="[]"
          :columns="columns"
          :is-paging="false"
          row-key="Id"
        />
      </queryLayout>
    </el-card>
    <phyLayoutEdit v-model="layout" :form-id="formId" :form-name="formName" :visible.sync="visible" @save="close" />
    <controlEdit :id="id" :form-id="formId" :location="0" :visible.sync="controlVisible" @save="close" />
    <searchEdit :form-id="formId" :visible.sync="searchVisible" @close="close" />
  </div>

</template>

<script>
import moment from 'moment'
import { Get } from '@/customForm/api/form'
import queryLayout from '@/customForm/components/queryLayout/queryLayout.vue'
import phyLayoutEdit from './components/phyLayoutEdit.vue'
import controlEdit from './components/queryControlEdit.vue'
import { Delete } from '@/customForm/api/phyQuery'
import * as queryApi from '@/customForm/api/queryForm'
import searchEdit from './components/searchEdit.vue'
export default {
  components: {
    phyLayoutEdit,
    queryLayout,
    searchEdit,
    controlEdit
  },
  data() {
    return {
      columns: [],
      formName: null,
      layout: null,
      search: null,
      left: null,
      formId: null,
      id: null,
      searchVisible: false,
      controlVisible: false,
      visible: false,
      colAlign: {
        0: 'left',
        1: 'center',
        2: 'right'
      }
    }
  },
  computed: {},
  mounted() {
    this.formId = this.$route.params.id
    if (this.formId == null) {
      return
    }
    this.loadBody()
    this.reset()
  },
  methods: {
    moment,
    setLoayout() {
      this.visible = true
    },
    close(isRefresh) {
      if (isRefresh) {
        this.loadBody()
      }
    },
    drop() {
      const title = '确认删除 ' + this.left.Label + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop()
      })
    },
    async submitDrop() {
      await Delete(this.left.Id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.reset()
    },
    setLeft() {
      this.id = this.left == null ? null : this.left.Id
      this.controlVisible = true
    },
    save() {
      this.loadBody()
    },
    setSearch() {
      this.searchVisible = true
    },
    async loadBody() {
      const body = await queryApi.GetBody(this.formId)
      this.search = body.Search
      this.left = this.search.Left
      this.columns = this.initChildren(body.Table.Column)
    },
    initChildren(list) {
      if (list == null || list.length === 0) {
        return null
      }
      return list.map(c => {
        const col = {
          title: c.Label
        }
        if (c.Children == null || c.Children.length === 0) {
          col.sortable = 'custom'
          col.align = this.colAlign[c.align]
          col.key = c.Name
          col.sortby = c.SortName == null ? c.Name : c.SortName
          if (c.Width) {
            col.minWidth = c.Width + 'px'
          }
        } else {
          col.children = this.initChildren(c.Children)
        }
        return col
      })
    },
    async reset() {
      const res = await Get(this.formId)
      this.formName = res.FormName
      this.layout = res.Layout
    }
  }
}
</script>
<style scoped>
.content {
  padding: 10px;
}
.content .header {
  text-align: right;
  line-height: 30px;
  height: 30px;
}
.content .header span{
  float: left;
}
</style>
